<template>
  <!-- 左侧边栏 - 固定在页面左侧 -->
  <aside class="sidebar">
    <!-- 导航菜单 - 主要功能区域 -->
    <nav class="sidebar-nav">
      <!-- 发现菜单项 - 当前激活状态 -->
      <div class="nav-item active">
        <!-- 发现图标 - 使用图片替代SVG -->
        <img src="/src/assets/icons/home.png" alt="发现" class="nav-icon" />
        <!-- 菜单文字 -->
        <span class="nav-text">发现</span>
      </div>
      
      <!-- 发布菜单项 -->
      <div class="nav-item">
        <!-- 发布图标 -->
        <img src="/src/assets/icons/more.png" alt="发布" class="nav-icon" />
        <!-- 菜单文字 -->
        <span class="nav-text">发布</span>
      </div>
      
      <!-- 通知菜单项 -->
      <div class="nav-item">
        <!-- 通知图标 -->
        <img src="/src/assets/icons/inform.png" alt="通知" class="nav-icon" />
        <!-- 菜单文字 -->
        <span class="nav-text">通知</span>
      </div>
      
      <!-- 我菜单项 -->
      <div class="nav-item">
        <!-- 用户图标 -->
        <img src="/src/assets/icons/user.png" alt="我" class="nav-icon" />
        <!-- 菜单文字 -->
        <span class="nav-text">我</span>
      </div>
    </nav>
    
    <!-- 底部菜单区域 - 次要功能区域 -->
    <div class="sidebar-bottom">
      <!-- 更多菜单项 -->
      <div class="nav-item">
        <!-- 更多图标 -->
        <img src="/src/assets/icons/Announce.png" alt="更多" class="nav-icon" />
        <!-- 菜单文字 -->
        <span class="nav-text">更多</span>
      </div>
    </div>
  </aside>
</template>

<script setup>
// 这里可以添加导航逻辑
// 例如：处理菜单点击事件、路由跳转等
</script>

<style scoped>
/* 侧边栏样式 */
.sidebar {
  position: fixed;        /* 固定定位，相对于视口定位 */
  left: 0;                /* 距离左边0像素 */
  top: 60px;              /* 距离顶部60像素，为头部留出空间 */
  width: 80px;            /* 固定宽度80像素 */
  height: calc(100vh - 60px); /* 高度为视口高度减去头部高度 */
  background: white;      /* 背景色为白色 */
  display: flex;          /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列 */
  z-index: 100;           /* 层级，确保在内容之上 */
}

/* 导航菜单样式 */
.sidebar-nav {
  flex: 1;                /* 占据剩余空间 */
  padding: 20px 0;         /* 上下内边距20像素 */
}

/* 导航项样式 */
.nav-item {
  display: flex;          /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列，图标在上，文字在下 */
  align-items: center;    /* 水平居中对齐 */
  padding: 20px 0;        /* 上下内边距20像素 */
  cursor: pointer;        /* 鼠标指针样式为手型 */
  transition: all 0.2s;  /* 过渡动画，所有属性变化0.2秒 */
  color: #666;            /* 字体颜色为灰色 */
}

/* 导航项悬停效果 */
.nav-item:hover {
  background: #f0f0f0;    /* 悬停时背景色为浅灰色 */
}

/* 激活状态的导航项 */
.nav-item.active {
  color: #ff2442;         /* 激活时字体颜色为红色 */
  background: transparent; /* 激活时背景透明 */
}

/* 导航图标样式 */
.nav-icon {
  width: 20px;            /* 宽度20像素 */
  height: 20px;           /* 高度20像素 */
  object-fit: contain;   /* 保持比例 */
  margin-bottom: 4px;    /* 底部边距4像素，与文字保持距离 */
}

/* 导航文字样式 */
.nav-text {
  font-size: 12px;        /* 字体大小12像素 */
  font-weight: 500;        /* 字体粗细为中等 */
}

/* 底部菜单区域样式 */
.sidebar-bottom {
  padding: 20px 0;        /* 上下内边距20像素 */
}
</style>